<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
body { padding-top: 70px; padding-bottom: 30px; }
td   { width:2em; color:#336699; }
    </style>
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">井字遊戲</a>
        </div>
   </nav>

    <div class="container">
      <br/><br/>
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
          <table id="ox" class="table table-bordered" style="width:100px">
            <tbody>
              <tr>
                <td id="11">&nbsp;</td>
                <td id="12">&nbsp;</td>
                <td id="13">&nbsp;</td>
              </tr>
              <tr>
                <td id="21">&nbsp;</td>
                <td id="22">&nbsp;</td>
                <td id="23">&nbsp;</td>
              </tr>
              <tr>
                <td id="31">&nbsp;</td>
                <td id="32">&nbsp;</td>
                <td id="33">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div> <!-- /container -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
    
function get(i,j) {
  return $('#'+i+''+j).html();
}

var x = [[1,1,1], [2,2,2], [3,3,3], [1,2,3], [1,2,3], [1,2,3], [1,2,3], [1,2,3]];
var y = [[1,2,3], [1,2,3], [1,2,3], [1,1,1], [2,2,2], [3,3,3], [1,2,3], [3,2,1]];

function check() {
  for (var i=0; i<x.length; i++) {
    var first = get(x[i][0], y[i][0]);
    for (var j=0; j<3; j++) {
      var cell = get(x[i][j], y[i][j]);
      if (cell === "&nbsp;") break;
      if (cell !== first) break;
      if (j===2)
        return first+"贏了！";
    }
  }  
  return null;
}

var turn = 'O';
var isGameOver = false;

$(document).ready(function() {
  console.log('ready()');
  $('#ox td').mousedown(function () {
    if (isGameOver) return;
    var id = $(this).attr("id");
    var v = $('#'+id).html();
    if (v==='O' || v==='X') return;
    $(this).html(turn);
    turn = (turn==='O')?'X':'O';
    var winMsg = check();
    if (winMsg !== null) {
      alert(winMsg);
      isGameOver = true;
    }
  });
});
    </script>
  </body>
</html>
